<template>
  <div class="app-container">
    <div class="filter-container" v-loading="loading">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="部门">
          <el-cascader
            :options="formPage.index_cascader_data"
            :show-all-levels="false" :props="formPage.props"
            v-model="searchData.pids"
            @change="addPid"
            change-on-select
          ></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input size="mini" v-model="searchData.name" placeholder="部门名称"></el-input>
        </el-form-item>
      </el-form>

      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="2"><el-button type="primary" @click="onAdd" size="mini">新增</el-button></el-col>
        <el-col :span="2" :offset="18"><el-button type="primary" @click="onSearch" size="mini">查询</el-button></el-col>
      </el-row >
    <tree-table :data="treeTabledata" :evalFunc="func" :evalArgs="args" :expandAll="expandAll"  border>
      <el-table-column
        prop="id"
        label="id"
        fixed="left"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="simpleName"
        label=" 部门简称称"
        fixed="left"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="fullName"
        label=" 部门全称"
        fixed="left"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="seq"
        label="排序"
        width="auto"
        fixed="left"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label=" 部门状态"
        width="auto"
        :formatter="stautsChange"
        fixed="left"
        >
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="left">
        <template slot-scope="scope" >
          <!--<el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>-->
          <el-dropdown trigger="click" v-if="scope.row.id!=0">
      <span class="el-dropdown-link">
        <el-button type="primary" size="mini">操作</el-button>
      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button type="primary" @click="handleEdit(scope.row)" size="mini">修改</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="primary" @click="delResource(scope.row)" size="mini">删除</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </tree-table>
     <deptAdd v-bind:formPage="formPage" >

     </deptAdd>
  </div>
  </div>
</template>

<script>
  import treeTable from '@/components/TreeTable'
  import treeToArray from '@/components/TreeTable/customEval.js'
  import {deptList,delDept} from "@/api/dept/dept";
  import  deptAdd from './add'

  export default {
    name: "deptManger",
    components: {treeTable,deptAdd},
    data() {
      return {
        func: treeToArray,
        expandAll: true,
        treeTabledata:[],
        loading:true,
        searchData: {
          id: '',
          name: '',
          pids:[],
          deptId:''
        },
        cache:{
          id:null,
        },
        args: [null, null, 'timeLine'],
        formPage:{
          props: {
            value: 'id',
            label:'simpleName',
            children: 'children'
          },
          show:false,
          cascader_data:[],
          index_cascader_data:[],
          formData:{
            id: "",
            seq: "",
            status: "",
            version: "",
            simpleName:"",
            fullName:"",
            tips:"",
            pid: "",
            pids:[],
          }
        }
      }
    },
    methods: {
      onAdd(){
        console.log(this.cache.id)
        // this.$refs['resourceAddForm'].resetFields();
        // this.$refs['resourceAddForm'].clearValidate()
        if(this.cache.id!=null){
          this.formPage.formData={
            id: "",
            seq: "",
            status: "",
            version: "",
            simpleName:"",
            fullName:"",
            tips:"",
            pid: "",
            pids:[],
          }
          this.cache.id=null;
        }
        ;
        this.formPage.show=true;
      },
      handleEdit(row){
        this.formPage.show=true;
        if(this.cache.id!=row.id||this.cache.id==null){
          for(var p in  this.formPage.formData){//遍历json对象的每个key/value对,p为key
            this.formPage.formData[p]=row[p]
          }
          if(this.formPage.formData.pids==null){
            this.formPage.formData.pids=[]
          }
          this.formPage.formData.status+='';
          this.cache.id=row.id;
        }
        console.log(this.formPage.formData)
      },
      handelDel(){


      },
      message(row) {
        this.$message.info(row.name)
      },
      onSearch(){
          // console.log(this.searchData)
          this.loading=true;
          deptList(this.searchData).then(response => {
          let r_list = response.data.data;
          // console.log(r_list)
          //   r_list = this.resourceTree(r_list,0)
          this.treeTabledata=r_list;
          this.formPage.cascader_data=r_list;
          // console.log(this.formPage.index_cascader_data.length)
          if( this.formPage.index_cascader_data.length==0){
            this.formPage.index_cascader_data=r_list;
          }
            setTimeout(() => {
              this.loading=false;
            }, 300);
        });
      },
      findpids(pid){


      },

      stautsChange(row, column){
        var stats = row[column.property];
        if(stats==1){
          return "启用";
        }
        else {
          return "禁用";
        }
        return stats;
      },
      resourceTypeChange(row, column){
        var stats = row[column.property];
        if(stats==1){
          return "按钮";
        }
        else {
          return "菜单";
        }
        return stats;
      },
      delResource(row){
         delDept({id:row.id}).then(response =>{
           this.$message({
             message: response.data.mesg,
             type: 'success',
             duration: 5 * 1000
           })
         })
      },
      addPid(aaa){
        if(aaa.length==1){
          this.searchData.deptId=aaa[0]
        }
        else {
          this.searchData.deptId=aaa[aaa.length-1]
        }
      },
    },
    mounted() {
      this.onSearch();
    }
  }
</script>

<style scoped>

</style>
